<template>


   <div class="page-box">
      <div class="page-title">
         {{ '产品入库' }}
      </div>

      <div class="page-search">
         <div class="search-box flex_start_center" :style="{ height: IsHeight }">
            <el-input v-model="pageData.keyword" placeholder="订单类型/采购单/出库入库单"
               style="width: 200px; margin-right: 10px; margin-bottom: 10px;" @input="getAlltabeData" />
            <div class="search-box-item flex_center_center" style="transform: translateY(-5px);">
               <span class="margin-right-10">显示:</span>
               <el-button :color="pageData.status === 'STATUS_1' ? '#172B4D' : ''"
                  @click="handleStatusFilter('STATUS_1')">
                  待入库
               </el-button>
               <el-button :color="pageData.status === 'STATUS_2' ? '#172B4D' : ''"
                  @click="handleStatusFilter('STATUS_2')">
                  部分入库
               </el-button>
               <el-button :color="pageData.status === 'STATUS_3' ? '#172B4D' : ''"
                  @click="handleStatusFilter('STATUS_3')">
                  全部入库
               </el-button>
            </div>
         </div>

         <div class="search-btn">
            <div class="btn_item" @click="handleClickHeight">
               <img class="btn_img" src="@/assets/sx.png" alt=""> <span> 高级筛选 </span>
            </div>
            <div class="btn_item">
               <img class="btn_img" src="@/assets/dc.png" alt=""> <span> 导出 </span>
            </div>

         </div>
      </div>
      <div class="search-btn-right">

      </div>
   </div>

   <div class="table-box">

      <el-table :data="tabeData" style="width: 100%" v-loading="loading" border default-expand-all>

         <el-table-column align="center" prop="source_type" label="订单类型" width="180">
            <template #default="scope">
               <div>
                  <span>{{ scope.row.source_type_text }}</span>
               </div>

            </template>
         </el-table-column>
         <el-table-column align="center" prop="source_no" label="采购单/出库退货单" width="220">
            <template #default="scope">
               <div style="color: blue; cursor: pointer;" @click="handleClickDetails(scope.row)"> {{ scope.row.source_no
                  }}</div>
            </template>
         </el-table-column>

         <el-table-column align="center" prop="date" label="采购/退货日期" width="140" />
         <el-table-column align="center" prop="sc_name" label="供应商/客户" width="120" />
         <el-table-column align="center" prop="manager_name" label="采购/出库退货负责人" width="180" />
         <el-table-column align="center" prop="manager_phone" label="联系电话" width="120" />
         <el-table-column align="center" prop="status_text" label="状态" width="100">
            <template #default="scope">
               <el-tag :type="scope.row.status == '1' ? 'warning' : scope.row.status == '2' ? 'success' : 'info'">{{scope.row.status_text}}</el-tag>
    
            </template>
         </el-table-column>

         <el-table-column align="center" prop="remark" label="备注" min-width="200">
            <template #default="scope">
               <div>{{ scope.row.remark || '--' }}</div>
            </template>
         </el-table-column>
         <el-table-column align="center" prop="creator_name" label="创建人" width="100" />
         <el-table-column align="center" prop="created_at" label="创建时间" width="180" />

         <el-table-column align="center" prop="audit_name" label="审批人" width="150" />
         <el-table-column align="center" prop="audited_at" label="审批时间" width="180" />
         <el-table-column fixed="right" label="操作" width="120" align="center">
            <template #default="scope">
               <div class="btn-box">
                  <!--状态为全部入库则按钮禁用  -->
                  <el-button     :disabled="scope.row.status == '3'"  size="small" type="primary" @click="handleClickEdit(scope.row)" >入库</el-button>
               </div>
            </template>
         </el-table-column>
      </el-table>
   </div>

   <!-- 分页 -->
   <Pagination class="pagination" @pageSize="pageSize" @getPage="getPage" :page="pageData.page"
      :page-size="pageData.page_size" :total="total" />
   <!-- 入库 -->
   <cpStoreDialog v-model:dialogVisible="isShow" :dialogType="dialogType" :dialogRow="dialogRow"
      @submit="handleSubmit" />
   <!-- 详情 -->
   <storeDetails v-model:dialogVisible="DetailsVisible" :dialogRow="dialogRow" @submit="handleSubmit" />
</template>

<script setup lang="ts">

import { ref, onMounted, watch } from "vue";
import Pagination from "@/components/Pagination.vue";
import { ElMessageBox, ElMessage } from 'element-plus';
import cpStoreDialog from "./components/cpStoreDialog.vue";
import storeDetails from "./components/storeDetails.vue";
import api from "@/api";

// 定义仓库数据类型
interface Warehouse {
   id: string | number;
   source_type: string;
   source_id: number;
   source_no: string;
   status: number;
   date: string;
   sc_name: string;
   manager_name: string;
   manager_phone: string;
   parent_id?: string | number;
   note?: string;
   creator_name: string;
   audit_name?: string;
   audited_at?: string;
   status_text?: string;
   source_type_text?: string;
}
const DetailsVisible = ref<boolean>(false);

let IsHeight = ref<number | string>(0);
const isShow = ref<boolean>(false);
const search = ref<string>('');
let dialogType = ref<string>('');
let dialogRow = ref<Warehouse>({} as Warehouse);
const pageData = ref({
   page_size: 10,
   page: 1,
   keyword: '',
   status: '',
   type: 'main'
});
const total = ref(0);
const tabeData = ref<Warehouse[]>([]);
// 侦听动态分页
watch(
   () => {
      return pageData.value;
   },
   () => {
      getAlltabeData();
   },
   { deep: true }
);



const handleClickDetails = (row: Warehouse) => {
   DetailsVisible.value = true;
   dialogRow.value = row;
}

let nub = ref<number>(0);
const handleClickHeight = () => {
   nub.value++;
   if (nub.value % 2 == 1) {
      IsHeight.value = '34px';
   } else {
      IsHeight.value = '0px';
   }
}

const pageSize = (e: number) => {
   pageData.value.page_size = e;
   getAlltabeData();
}
const getPage = (e: number) => {
   pageData.value.page = e;
   getAlltabeData();
}
onMounted(() => {
   getAlltabeData();
})


// 获取仓库列表
const getAlltabeData = async () => {
   loading.value = true;
   try {
      const res = await api.storage.product_in_list({
         ...pageData.value,
      });
      tabeData.value = res.data.data;
      total.value = res.data.pager.total_records;

      loading.value = false;
   } catch (error) {
      console.error('获取仓库列表失败', error);
   } finally {
      loading.value = false;
   }
};

const loading = ref(false);

// 编辑仓库
const handleClickEdit = (row: Warehouse) => {
   dialogType.value = 'edit';
   dialogRow.value = { ...row } as Warehouse;
   isShow.value = true;
}

// 处理状态筛选
const handleStatusFilter = (status: string) => {

   if (pageData.value.status == '') {
      pageData.value.status = status;
   } else if (pageData.value.status != '' && status == pageData.value.status) {
      pageData.value.status = '';
   } else {
      pageData.value.status = status;
   }

   getAlltabeData();
}

// 提交表单回调
const handleSubmit = () => {
   getAlltabeData();
}



</script>

<style lang="scss" scoped>
.btn-box {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   gap: 5px;
}

.main-warehouse {
   font-weight: bold;
   color: #333;
}

// 输入框样式
:deep(.el-input__wrapper) {
   background-color: rgba(250, 252, 251, 1);
}

//表格样式
:deep(.el-table) {
   --el-table-header-bg-color: rgba(235, 236, 240, 1);
}

:deep(.el-table thead) {
   color: #444;
}

// 子仓库行样式
:deep(.sub-warehouse-row) {
   background-color: #fef6e5;
}

//分页样式
.pagination {
   width: calc(100% - 50px);
   position: fixed;
   bottom: 20px;
   right: 20px;
   padding-top: 10px;
   border-top: 1px solid #98989848;
}

:deep(.el-pagination.is-background .el-pager li.is-active) {
   background-color: #000 !important;
}
</style>